<!--
// 
// GPasswordInput.vue
// rzhwweb
// 
// Created by 区区电脑 on 2024/07/02.
// 
-->
<template>
    <div class="GPasswordInput" @click.stop="onFocus" :class="{focus: focus}" :style="{height: height + 'px'}">
        <input ref="hideInput" class="hide-input" :value="value" @keydown="onKeydown" @input="onInput" @focus="onFocus" @blur="onBlur"/>
        <div v-if="isShow" class="show-input">
            <div v-for="(text, i) in value" :key="i" class="text">{{text}}</div>
            <div v-if="focus" class="line"></div>
        </div>
        <div v-else class="show-input">
            <div v-for="i in value.length" :key="i" class="point"></div>
            <div v-if="focus" class="line"></div>
        </div>
        <div class="see" @click="isShow = !isShow">
            <b-icon v-if="isShow" name="bi-eye" size="16"/>
            <b-icon v-else name="bi-eye-slash" size="16"/>
        </div>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted, watch} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import BIcon from "@/components/BIcon/BIcon.vue";

const props = defineProps({
    modelValue: {
        type: String,
    },
    height: {
        type: [Number, String],
        default: () => 30
    }
});
const emits = defineEmits(["update:modelValue"]);

// 路由
const router = useRouter();
// store
const store = useStore();

const value = ref("");
const focus = ref(false);
const isShow = ref(false);

const hideInput = ref()
function onFocus() {
    focus.value = true
    hideInput.value.focus()
}

function onKeydown(event) {
    if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown") {
        setTimeout(() => {
            hideInput.value.selectionStart = 99999;
        }, 100)
    }
}

function onBlur() {
    focus.value = false
}

function onInput({target}) {
    emits("update:modelValue", target.value);
}

function setValue() {
    value.value = props.modelValue || ""
}

watch(() => props.modelValue, (newValue) => {
    setValue()
})
onMounted(() => {
    setValue()
    document.addEventListener("click", (event) => {
        hideInput?.value?.blur()
    })
})
</script>

<style scoped lang="scss">
.GPasswordInput {
    width: 100%;
    height: 30px;
    position: relative;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    .hide-input {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        opacity: 0;
    }
    .show-input {
        position: absolute;
        left: 10px;
        top: 0;
        right: 30px;
        bottom: 0;
        z-index: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        user-select: none;
        .point {
            width: 6px;
            height: 6px;
            background: #333;
            border-radius: 100%;
            margin: 0 3px;
        }
        .text {
            color: #333;
            margin: 0 3px;
        }
        .line {
            width: 1px;
            height: 16px;
            background:#333;
            animation: line 1.0s ease infinite;
        }
    }
    .see {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 10;
        cursor: pointer;
    }
}
.focus {
    border: 1px solid var(--el-color-primary);
}
@keyframes line {
    0% {opacity: 1}
    50% {opacity: 0}
    100% {opacity: 1}
}
</style>